<template>
	<view class="admin">
		<view class="header">
			<view class="header_content">
				
				<view class="ID_box">
					<view class="ID" @click="copynum(info.shopCode)">体验店编号：{{info.shopCode}}</view>
				</view>
				<view class="btn" @click="jump">收益明细</view>
			</view>
				
			<view class="guanli_box">
				<view class="title">管理</view>
				<view class="gl_list_box">
					<view class="gl_list" v-for="(item,index) in glList" :key="item.id" @click="toDetail(index)">
						<view class="l_img_box">
							<image :src="'../../static/images/shopAdmin' + (index + 1) + '.png'" mode=""></image>
						</view>
						<view class="text_top">{{item.order}}</view>
						<view class="text_bottom">{{item.allOrder}}</view>
					</view>
				</view>
			</view>
			<view class="nav_box" v-if="scenicBoxTop > scrollTop">
				<view  class="nav link">推荐体验店</view>
			</view>
			<view class="nav_box" :class="{'on' : scrollTop > scenicBoxTop}" v-else>
				<view class="nav link">推荐体验店</view>
			</view>
		</view>
		<view class="list_box" v-show="navIndex==0">
			<view class="list" v-for="(item,index) in shoplist" :key="index" @click="test(item.id)">
				<image class="s_img" :src="item.imgSrc" mode=""></image>
				<view class="right_box">
					<view class="title">{{item.title}}</view>
					<view class="renqi_box">
						<view class="renqi">
							<text>{{item.province}}{{item.city}}{{item.area}}</text>
							<text class="text">人气:{{item.saleNum}}</text>
						</view>
						<view class="jilu">{{item.juli}}</view>
					</view>
					<view class="title address">{{item.address}}</view>
				</view>
			</view>
		</view>
		<view class="list_box" v-show="navIndex==1">
			<view class="list" v-for="(item,index) in shoplist1" :key="index" @click="test(item.id)">
				<image class="s_img" :src="item.imgSrc" mode=""></image>
				<view class="right_box">
					<view class="title">{{item.title}}</view>
					<view class="renqi_box">
						<view class="renqi">
							<text>{{item.province}}{{item.city}}{{item.area}}</text>
							<text class="text">人气:{{item.saleNum}}</text>
						</view>
						<view class="jilu">{{item.juli}}</view>
					</view>
					<view class="title address">{{item.address}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue" 
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				navIndex:1,
				scenicBoxTop:0,
				scrollTop:0,
				glList:[
					{id:1,order:'订单管理',allOrder:'查看全部订单'},{id:2,order:'库存管理',allOrder:'全部库存'},
					{id:3,order:'补贴管理',allOrder:'补贴库存'}
				],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				id:0,
				userinfo:[],
				info:[],
				longitude:0,
				latitude:0,
				shoplist:[],
				shoplist1:[]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav_box').boundingClientRect(data => {
				this.scenicBoxTop = data.top
			}).exec()
		},
		onLoad(options) {
			this.userinfo=uni.getStorageSync('user');
			this.id=options.id;
			this.longitude=uni.getStorageSync('userlon');
			this.latitude=uni.getStorageSync('userlat');
			if(this.longitude=='' || this.longitude == null || this.longitude == undefined || this.latitude=='' || this.latitude == null || this.latitude == undefined){
				this.choose_location();
			}else{
				this.getinfo();
				this.getshoplist1();
			}
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods: {
			navtab:function(n){
				this.navIndex = n;
				this.p=1;
				this.shoplist1=[];
				this.shoplist=[];
				if(n==0){
					this.getshoplist();
				}else if(n==1){
					this.getshoplist1();
				}
			},
			copynum(str){
				uni.setClipboardData({
				    data: str,
				    success: function () {
				        uni.showToast({
				        	title: '复制成功',
				        	icon: 'none'
				        })
				    }
				})
			},
			choose_location(){
				var that=this;
				uni.showLoading({
					title:'定位中...'
				})
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						uni.hideLoading();
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						uni.setStorageSync('userlon',longitude);
						uni.setStorageSync('userlat',latitude);
						that.longitude=longitude;
						that.latitude=latitude;
						that.getinfo();
						that.getshoplist1();
				    }
				});
			}, 
			getshoplist(){
				var that=this;
				this.longitude=uni.getStorageSync('userlon');
				this.latitude=uni.getStorageSync('userlat');
				this.$http.get('shop/getChildshop',{
					id:that.id,
					userlon:that.longitude,
					userlat:that.latitude
				}).then(function (response) {
					console.log(response.data);
					that.shoplist=response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			getshoplist1(){
				var that=this;
				this.longitude=uni.getStorageSync('userlon');
				this.latitude=uni.getStorageSync('userlat');
				this.$http.get('shop/getMyShopChildShop',{
					id:that.id,
					userlon:that.longitude,
					userlat:that.latitude
				}).then(function (response) {
					console.log(response.data);
					if(response.data.has == 1){
						that.shoplist1=response.data.data;
					}
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			getinfo(){
				var that=this;
				this.$http.get('shop/getMyshop',{}).then(function (response) {
					that.info=response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			test:function(index){
				uni.navigateTo({
					url:'/pages/shopDetail/shopDetail?id='+index
				})
				return;
			},
			toDetail:function(index){
				if(index == 0){
					uni.navigateTo({
						url:'/pages/orderList/orderList?id='+this.id
					})
				}else if(index == 1){
					uni.navigateTo({
						url:'/pages/kuCunGuanLi/kuCunGuanLi?id='+this.id
					})
				}else if(index == 2){
					uni.navigateTo({
						url:'/pages/buTieGuanLi/buTieGuanLi?id='+this.id
					})
				}else if(index == 3){
					uni.navigateTo({
						url:'/pages/zitiGuanLi/zitiGuanLi?id='+this.id
					})
				}
			},
			// 1 佣金明细 2 我要提现 3积分明细
			jump:function(){
				console.log(11);
				uni.navigateTo({
					url:'/pages/commissionList/commissionList?id='+this.id+'&type=1'
				})
			}
		},
		//加载更多
		onReachBottom(){
			
			//延迟是为了看效果，实际数据时不要延迟 loadingType=2时表示没有数据了
			
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.admin{
		width: 100%;
		padding-bottom: 200rpx;
		.fixed{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #6686f5;
			border-radius: 40rpx 40rpx 0 0;
			z-index: 10;
			.code_box{
				background: #fff;
				border-radius: 20rpx;
				text-align: center;
				.bottom_box{
					padding: 40rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.bottom_list{
						color: #666;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						.d_img{
							width: 35rpx;
							height: 35rpx;
							margin-right: 10rpx;
						}
					}
				}
				.shou{
					color: #6686f5;
					font-size: 32rpx;
				}
				.shi{
					color: #333;
					font-size: 28rpx;
					padding: 10rpx 0 10rpx;
				}
				.c_img{
					width: 400rpx;
					height: 400rpx;
					margin: 10rpx 0 10rpx;
				}
			}
			.tit{
				text-align: center;
				padding: 40rpx 0;
				font-size: 34rpx;
				font-weight: bold;
				color: #fff;
			}
		}
		.isBg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .3);
			z-index: 5;
		}
		.btn_box{
			position: fixed;
			background: #fff;
			bottom: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 30rpx 60rpx;
			.btn{
				width: 100%;
				background: #6686f5;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 48rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
			}
		}
		.list_box{
			background: #fff;
			border-radius: 40rpx;
			padding: 10rpx 30rpx 0;
			.list{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				.right_box{
					margin-left: 20rpx;
					flex: 1;
					.renqi_box{
						padding: 16rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.renqi{
							color: #666666;
							font-size: 24rpx;
							.text{
								margin-left: 10rpx;
								padding: 0 10rpx;
								background: #eef2ff;
								border-radius: 10rpx;
								color: #6686f5;
								font-size: 22rpx;
							}
						}
						.jilu{
							color: #666666;
							font-size: 24rpx;
						}
					}
					.title{
						width: 480rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						&.address{
							font-size: 24rpx;
							color: #666666;
							font-weight: 100;
						}
					}
				}
				.s_img{
					width: 134rpx;
					height: 134rpx;
				}
			}
		}
		.header{
			padding: 30rpx 30rpx 0;
			background: linear-gradient(180deg, #dbe3ff 0%, #f6f6f6 100%);
			.guanli_box{
				margin-top: 40rpx;
				border-radius: 20rpx;
				background: linear-gradient(90deg, #fff 0%, #fff 80%, #dbe3ff 100%);
				.gl_list_box{
					display: flex;
					align-items: center;
					padding-bottom: 30rpx;
					.gl_list{
						width: 33%;
						text-align: center;
						.text_top{
							color: #333;
							font-size: 28rpx;
							padding: 4rpx 0 10rpx;
						}
						.text_bottom{
							color: #999;
							font-size: 22rpx;
						}
						.l_img_box{
							text-align: center;
							image{
								width: 62rpx;
								height: 62rpx;
							}
						}
					}
				}
				.title{
					padding: 30rpx 30rpx 10rpx;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}
			.nav_box{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				// position: fixed;
				// top: var(--window-top);
				// left: 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				z-index: 1;
				&.on{
					position: fixed;
					top: var(--window-top);
					left: 0;
					background: #fff;
				}
				.nav{
					font-size: 32rpx;
					color: #333;
					&.link{
						color: #6686f5;
						font-weight: bold;
					}
				}
			}
			.header_content{
				background: #ffffff;
				padding: 40rpx 0;
				border-radius: 20rpx;
				.today_box{
					padding: 30rpx 0 60rpx;
					font-size: 28rpx;
					color: #333;
					text-align: center;
					.today_num{
						margin-left: 10rpx;
						padding: 4rpx 16rpx;
						border-radius: 22rpx;
						background: #f3f4f6;
						font-size: 28rpx;
						color: #333;
					}
				}
				.score_bg{
					padding: 30rpx 90rpx;
					.score_box{
						padding: 20rpx 0;
						text-align: center;
						background: #f5f5f5;
						border-radius: 100rpx;
						.num{
							font-size: 28rpx;
							color: #333;
							.text{
								font-weight: bold;
								font-size: 36rpx;
							}
						}
						.score_mingxi{
							padding-top: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #6685f5;
							font-size: 24rpx;
							.m_img{
								width: 22rpx;
								height: 23rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
				.btn{
					width: 500rpx;
					text-align: center;
					height: 88rpx;
					line-height: 88rpx;
					background: #6686f5;
					border-radius: 44rpx;
					margin: 20rpx auto 0;
					color: #fff;
					font-weight: bold;
					box-shadow: 0 3rpx 20rpx #6686f5;
				}
				.text{
					text-align: center;
					padding: 14rpx 0;
					font-size: 28rpx;
					color: #333;
					&.tixian{
						font-size: 24rpx;
						color: #666;
					}
					&.price{
						padding-top: 0;
						font-size: 80rpx;
						font-weight: bold;
						.f{
							font-size: 30rpx;
							font-weight: bold;
						}
					}
				}
				.ID_box{
					padding: 30rpx 80rpx 20rpx;
					.ID{
						text-align: center;
						color: #6685f5;
						font-size: 28rpx;
						padding: 10rpx 60rpx;
						background: linear-gradient(90deg, #fff 0%, #dee5ff 50%, #fff 100%);
					}
				}
				.top{
					display: flex;
					justify-content: space-between;
					.top_right{
						background: #e2eeff;
						padding: 4rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #6685f5;
						font-size: 28rpx;
						border-radius: 26rpx 0 0 26rpx;
						.c_img{
							margin-right: 10rpx;
							width: 24rpx;
							height: 26rpx;
						}
					}
				}
			}
		}
	}
</style>
